<template>
  <div class="project-detail-page">
    <!-- 顶部标题 -->
    <Header :login="true" />
    <div class="back-page">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <el-link type="primary" @click="onCancel" icon="DArrowLeft">返回</el-link>
        <span>首页 / {{ Title.name }}控制台 / {{ Title.value }}项目详情</span>
      </div>
      <div style="height: 30px"></div>
      <!-- 页面内容 -->
      <div class="content">
        <div class="top">
          <div>项目编号：{{ projectInfo.oaCode }}</div>
          <div>项目名称：{{ projectInfo.name }}</div>
          <div>项目状态：{{ projectInfo.status }}</div>
        </div>
        <div class="sidebar">
          <ul class="menu-list" ref="menu_list">
            <li v-for="(item, index) in sidebar" :key="index">
              <span style="display: flex; align-items: center; background-color: #fff; font-size: 20px">
                <span style="flex: 1">{{ index + 1 }}、{{ item.title }}</span>
              </span>
              <ul class="sub-menu">
                <li v-for="(items, index) in item.items" :key="index">
                  <span class="sidebarlist">
                    <span style="flex: 1">{{ items.label }}</span>
                    <!-- {{ items.boolen }} -->
                    <img v-if="items.boolen" src="@/assets/tick.png" alt="Icon" style="width: 20px; height: 20px; margin-right: 10px" />
                  </span>
                </li>
              </ul>
            </li>
          </ul>
          <div
            style="width: 1px; background-color: #d7d7d7; position: absolute; top: 26px; left: 64px; z-index: 0"
            :style="{ height: menu_list.clientHeight + 'px' }"
          ></div>
        </div>
        <div class="tableContent" v-if="type == 'judgeInfo'">
          <examineInfo :Code="projectInfo.oaCode" :type="projectInfo.taskNode" :pattern="projectInfo.type" />
        </div>
        <div class="tableContent" v-else-if="usertype == 'judge_compere' && projectInfo.type == 'project_score'">
          <!-- <div class="tab"> -->
          <div class="tab" v-if="projectInfo.taskNode != 'taskOver'">
            <el-steps :active="activestep" align-center>
              <el-step v-for="(item, index) in tab" :key="index" :title="item.name"> </el-step>
            </el-steps>
          </div>
          <!-- 签到与权限 -->
          <taskSign v-if="taskNode == 'taskSign'" />
          <taskDecode v-else-if="taskNode == 'taskDecode'" />
          <taskExamine
            :type="projectInfo.taskNode"
            :projectInfo="projectInfo"
            @next-step="next_step"
            v-else-if="taskNode == 'taskExamine'"
          />
          <taskPrice :type="projectInfo.taskNode" :projectInfo="projectInfo" @next-step="next_step" v-else-if="taskNode == 'taskPrice'" />
          <taskBusiness :type="projectInfo.taskNode" @next-step="next_step" v-else-if="taskNode == 'taskBusiness'" />
          <taskSkill :type="projectInfo.taskNode" @next-step="next_step" v-else-if="taskNode == 'taskSkill'" />
          <taskEnd :type="projectInfo.taskNode" @next-step="next_step" v-else-if="taskNode == 'taskEnd'" />
          <taskBreak @next-step="next_step" v-else-if="taskNode == 'taskBreak'" />
          <taskOver :pattern="projectInfo.type" @next-step="next_step" v-else-if="taskNode == 'taskOver'" />
          <taskBreak @next-step="next_step" v-else-if="taskNode == 'taskResultBreak'" />
          <div style="width: 95%; padding: 30px" v-else>
            <!-- 项目信息 -->
            <h3>项目信息</h3>
            <section class="section">
              <el-form :model="projectInfo" label-width="120px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="项目编号">
                      <el-input v-model="projectInfo.oaCode" style="width: 300px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目状态">
                      <el-input v-model="projectInfo.status" style="width: 300px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="项目名称">
                      <el-input v-model="projectInfo.name" style="width: 810px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="项目公示">
                      <el-input v-model="projectInfo.noticeUrl" style="width: 810px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="发布时间">
                      <el-date-picker
                        v-model="projectInfo.publishTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="征集截止日期">
                      <el-date-picker
                        v-model="projectInfo.applyEndTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="征集起始日期">
                      <el-date-picker
                        v-model="projectInfo.applyStartTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="评审日期">
                      <el-date-picker
                        v-model="projectInfo.auditTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </section>
            <div style="display: flex; justify-content: center; align-items: center">
              <el-button type="primary" style="margin-top: 20px; width: 300px; height: 42px" @click="StartReview()">开始评审</el-button>
            </div>
          </div>
        </div>
        <div class="tableContent" v-else-if="usertype == 'judge_compere'">
          <!-- <div class="tab"> -->
          <div class="tab" v-if="projectInfo.taskNode != 'vieTaskOver'">
            <el-steps :active="activestep" align-center>
              <el-step v-for="(item, index) in tab" :key="index" :title="item.name"> </el-step>
            </el-steps>
          </div>
          <biddingSinge v-if="taskNode == 'vieTaskSign'" />
          <div v-else-if="taskNode == 'vieTaskExamine'">
            <biddingDecode :pattern="projectInfo.type" />
            <biddingExamine :projectInfo="projectInfo" />
          </div>
          <div v-else-if="taskNode == 'vieTaskPrice'">
            <biddingPrice :type="projectInfo.taskNode" :pattern="projectInfo.type" />
          </div>
          <biddingEnd @next-step="next_step" v-else-if="taskNode == 'vieTaskEnd'" />
          <biddingBreak v-else-if="taskNode == 'vieTaskBreak' || taskNode == 'vieTaskResultBreak'" />
          <biddingOver v-else-if="taskNode == 'vieTaskOver'" />
          <div style="width: 95%; padding: 30px" v-else>
            <!-- 项目信息 -->
            <h3>项目信息</h3>
            <section class="section">
              <el-form :model="projectInfo" label-width="120px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="项目编号">
                      <el-input v-model="projectInfo.oaCode" style="width: 300px" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="项目状态">
                      <el-input v-model="projectInfo.status" style="width: 300px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="项目名称">
                      <el-input v-model="projectInfo.name" style="width: 810px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="项目公示">
                      <el-input v-model="projectInfo.noticeUrl" style="width: 810px" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="发布时间">
                      <el-date-picker
                        v-model="projectInfo.publishTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="征集截止日期">
                      <el-date-picker
                        v-model="projectInfo.applyEndTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="征集起始日期">
                      <el-date-picker
                        v-model="projectInfo.applyStartTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="评审日期">
                      <el-date-picker
                        v-model="projectInfo.auditTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        style="width: 300px"
                        default-time=""
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </section>
            <div style="display: flex; justify-content: center; align-items: center">
              <el-button type="primary" style="margin-top: 20px; width: 300px; height: 42px" @click="VStartReview()">开始评审</el-button>
            </div>
          </div>
        </div>
        <div class="tableContent" v-else-if="usertype == 'judge_custodian'">
          <supervisor v-if="taskNode != 'taskOver'" />
          <taskOver v-else />
        </div>
        <div class="tableContent" v-else-if="usertype == 'judge_jury'">
          <div class="tab" v-if="projectInfo.taskNode != 'taskOver'">
            <el-steps :active="juryProgress - 1" align-center>
              <el-step v-for="(item, index) in tab" :key="index" :title="item.name"> </el-step>
            </el-steps>
          </div>
          <examineInfo v-if="type == 'judgeInfo'" />
          <judgeSign
            v-else-if="juryProgress == 1"
            @next-step="
              (num) => {
                if (projectInfo.taskNode == 'taskDecode') {
                  juryProgress = num;
                }
              }
            "
          />
          <div v-else-if="juryProgress == 2">
            <judgeExamine
              @next-step="
                (num) => {
                  juryProgress = num;
                }
              "
            />
            <judgeDecode :projectInfo="projectInfo" />
            <div class="endbutton">
              <el-button type="primary" @click="JuryProgress('taskPrice')">下一步</el-button>
            </div>
          </div>

          <judgePrice
            :type="projectInfo.taskNode"
            :projectInfo="projectInfo"
            v-else-if="juryProgress == 3"
            @next-step="
              (num) => {
                juryProgress = num;
              }
            "
          />
          <judgeBusiness
            :type="projectInfo.taskNode"
            :projectInfo="projectInfo"
            v-else-if="juryProgress == 4"
            @next-step="
              (num) => {
                juryProgress = num;
              }
            "
          />
          <judgeSkill
            @next-step="
              (num) => {
                juryProgress = num;
              }
            "
            :type="projectInfo.taskNode"
            v-else-if="juryProgress == 5"
          />
          <judgeEnd
            @next-step="
              (num) => {
                juryProgress = num;
              }
            "
            v-else-if="juryProgress == 6"
          />
          <taskOver v-else-if="projectInfo.taskNode == 'taskOver'" />
          <judgeBreak :Info="projectInfo" v-else-if="juryProgress == 8" />
          <div v-else>{{ projectInfo.taskNode }}</div>
        </div>
        <div v-else></div>
      </div>
      <div style="height: 30px"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { judgeProjectInfo } from "@/api/project.js";
import { getDictList, getDict, nowTime, getdict } from "@/utils/common.js";
import { StartTasks, startVIE } from "@/api/examine.js";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
const id = computed(() => route.query.id);
const type = computed(() => route.query.type);
const usertype = computed(() => {
  if (localStorage.getItem("judgeInfo")) {
    return JSON.parse(localStorage.getItem("judgeInfo")).type;
  } else {
    return "";
  }
});
const state = ref("");
const activeStep = ref("0");
const custodianProgress = ref(1);
const juryProgress = ref(1);
const taskNode = ref("");
const now = computed(() => {
  // const stepNumber = Number(activeStep.value);
  // if (state.value == "") {
  //   return "1-4";
  // } else if (stepNumber > 0 && stepNumber <= 3) {
  //   return "2-1";
  // } else if (stepNumber > 3 && stepNumber < 7) {
  //   return "2-2";
  // } else if (stepNumber >= 7) {
  //   return "2-3";
  // } else {
  //   return "1-4";
  // }
});
const tab = ref([]);
const menu_list = ref({});

const projectInfo = ref({
  oaCode: "项目编号",
  name: "项目名称",
  noticeUrl: "项目公示",
  status: "征集中",
  publishTime: "2024-11-01",
  applyStartTime: "2024-11-10",
  applyEndTime: "2024-11-10",
  auditTime: "2024-11-11",
});
// 计算属性来确定当前激活的步骤
const activestep = computed(() => {
  const index = tab.value.findIndex((item) => item.value === projectInfo.value.taskNode);
  return index === -1 ? 0 : index; // 如果未找到匹配项，默认选中第一个步骤
});
const userInfo = computed(() => JSON.parse(localStorage.getItem("judgeInfo")) || JSON.parse(localStorage.getItem("supplierInfo")));
const sidebar = ref([]);
const tosidebar = (url) => {
  switch (url) {
    case "/registration":
      state.value = "";
      break;
    case "/review-record":
      state.value = "start";
      activeStep.value = "1";
      break;
    case "/review-result":
      state.value = "start";
      activeStep.value = "4";
      break;
    case "/project-selection":
      state.value = "start";
      activeStep.value = "7";
      break;
    default:
      break;
  }
};
const activeIndex = ref("1-4"); // 当前激活的索引
const signOut = () => {
  window.location.replace("/");
  localStorage.clear();
};
const Title = ref({});
const getInfo = () => {
  judgeProjectInfo({ id: id.value }).then((res) => {
    if (res.code == "200") {
      projectInfo.value = res.data;
      projectInfo.value.noticeUrl = projectInfo.value.noticeUrl.substring(projectInfo.value.noticeUrl.lastIndexOf("/") + 1);
      taskNode.value = projectInfo.value.taskNode;
      projectInfo.value.status = getDict("project_status", projectInfo.value.status);
      if (projectInfo.value.taskNode) {
        filetable.value = res.data.supplierList;
      }
      switch (userInfo.value.type) {
        case "judge_compere":
          Title.value = { name: "主持人", value: "未主持" };
          break;

        case "judge_jury":
          Title.value = { name: "评审人", value: "未评审" };

          break;
        default:
          Title.value = { name: "监督人", value: "未监督" };
          break;
      }
      for (let i = 0; i < res.data.judgeList.length; i++) {
        if (userInfo.value.id == res.data.judgeList[i].userId && projectInfo.value.taskNode != "") {
          switch (res.data.judgeList[i].type) {
            case "judge_compere":
              if (projectInfo.value.type == "project_score") {
                tab.value = [
                  { name: "1.签到与权限", value: "taskSign" },
                  { name: "2.文件解密", value: "taskDecode" },
                  { name: "3.资质审查", value: "taskExamine" },
                  { name: "4.价格评审", value: "taskPrice" },
                  { name: "5.商务评审", value: "taskBusiness" },
                  { name: "6.技术评审", value: "taskSkill" },
                  { name: "7.结果确认", value: "taskEnd" },
                ];
              } else {
                tab.value = [
                  { name: "1.签到与权限", value: "vieTaskSign" },
                  { name: "2.资质审查", value: "vieTaskExamine" },
                  { name: "3.价格评审", value: "vieTaskPrice" },
                  { name: "4.结果确认", value: "vieTaskEnd" },
                ];
              }
              if (projectInfo.value.taskNode == "taskBreak") {
                tab.value = [{ name: "8.申请中止", value: "taskBreak" }];
              }
              if (projectInfo.value.taskNode == "vieTaskBreak") {
                tab.value = [{ name: "5.申请中止", value: "vieTaskBreak" }];
              }

              Title.value = { name: "主持人", value: "开始评审" };
              break;
            case "judge_jury":
              tab.value = [
                { name: "1.签到与权限", value: "taskSign" },
                {
                  name: "2.资质审查",
                  value: "taskExamine",
                  value1: "taskDecode",
                },
                { name: "3.价格评审", value: "taskPrice" },
                { name: "4.商务评审", value: "taskBusiness" },
                { name: "5.技术评审", value: "taskSkill" },
                { name: "6.结果确认", value: "taskEnd" },
              ];
              Title.value = { name: "评审人", value: "开始评审" };
              break;
            default:
              Title.value = { name: "监督人", value: "开始评审" };
              break;
          }
        }
      }
      switch (projectInfo.value.taskNode) {
        case "" || undefined:
          juryProgress.value = 1;
          break;
        case "taskSign":
          juryProgress.value = 1;
          break;
        case "taskDecode":
          juryProgress.value = 2;
          break;
        case "taskExamine":
          juryProgress.value = 2;
          break;
        case "taskPrice":
          juryProgress.value = 3;
          break;
        case "taskBusiness":
          juryProgress.value = 4;
          break;
        case "taskSkill":
          juryProgress.value = 5;
          break;
        case "taskEnd":
          juryProgress.value = 6;
          break;
        case "taskBreak":
          juryProgress.value = 8;
          break;
        default:
          juryProgress.value = 7;
          break;
      }
      console.log(projectInfo.value.resultNoticeUrl);

      sidebar.value = [
        {
          title: "公告阶段",
          items: [
            { index: "1-1", label: "日程安排及公告", boolen: true },
            { index: "1-2", label: "补充公告", boolen: true },
            { index: "1-3", label: "澄清答疑", boolen: true },
            { index: "1-4", label: "项目参与登记", boolen: true },
          ],
        },
        {
          title: "评审阶段",
          items: [
            {
              index: "2-1",
              label: "评审记录",
              boolen:
                (projectInfo.value.taskNode != "" && projectInfo.value.taskNode != null) ||
                projectInfo.value.taskNode == "taskEnd" ||
                projectInfo.value.taskNode == "taskOver" ||
                projectInfo.value.taskNode == "vieTaskEnd" ||
                projectInfo.value.taskNode == "vieTaskOver" ||
                projectInfo.value.resultNoticeUrl,
            },
            {
              index: "2-2",
              label: "评审结果",
              boolen:
                projectInfo.value.taskNode == "taskEnd" ||
                projectInfo.value.taskNode == "taskOver" ||
                projectInfo.value.taskNode == "vieTaskEnd" ||
                projectInfo.value.taskNode == "vieTaskOver" ||
                projectInfo.value.resultNoticeUrl,
            },
            {
              index: "2-3",
              label: "确定项目中选人",
              boolen:
                projectInfo.value.taskNode == "taskOver" ||
                projectInfo.value.taskNode == "vieTaskOver" ||
                projectInfo.value.resultNoticeUrl,
            },
          ],
        },
        {
          title: "项目收尾阶段",
          items: [
            {
              index: "3-1",
              label: "中选通知公告",
              boolen: projectInfo.value.resultNoticeUrl,
            },
          ],
        },
        {
          title: "其他阶段",
        },
      ];
    }
  });
};
const StartReview = () => {
  console.log(projectInfo.value.taskNode);

  if (projectInfo.value.taskNode == "" || projectInfo.value.taskNode == null) {
    StartTasks({ id: id.value }).then((res) => {
      if (res.code == "200") {
        window.location.replace("");
      }
    });
  } else {
    // window.location.replace("");
  }
};
const VStartReview = () => {
  if (projectInfo.value.taskNode == "" || projectInfo.value.taskNode == null) {
    startVIE({ id: id.value }).then((res) => {
      if (res.code == "200") {
        window.location.replace("");
      }
    });
  } else {
    // window.location.replace("");
  }
};
const next_step = (type) => {
  console.log(type);

  taskNode.value = type;
  console.log(taskNode);
};
const onCancel = () => {
  if (window.history.length > 1) {
    window.history.back(); // 返回上一页
  } else {
    router.push(`judgeProject?type=${route.query.type}`);
    window.location.reload(); // 刷新当前页面
  }
};
// 定义表格数据
const filetable = ref([]);

const JuryProgress = (item) => {
  if (projectInfo.value.taskNode == "taskBreak") {
    ElMessage({
      message: "请等待主持人操作",
      type: "error",
    });
  } else {
    window.location.replace("");
  }
};
onMounted(() => {
  if (!userInfo.value) {
    router.push("/home");
  }
  getInfo();
});
</script>

<style scoped lang="scss">
@use "@/components/project/judge";
.back-page {
  min-height: calc(100vh - 56px);
  background: url("../../assets/f87147698f07020d4fea348f49da0166.png") no-repeat center center;
  background-size: cover;
}
</style>
